<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

   <style>

      /*边框*/
     h1,p,a,span{
         /* 边框的宽度 */
          /* border-width: 1px;  */
           /* border-top-width: 1px;
           border-left-width: 2px;
           border-bottom-width: 3px;
           border-right-width: 4px; */
          /* 边框的颜色 */
          /* border-color: red;  */
          /* border-top-color: red;
          border-right-color:blue;
          border-bottom-color: green;
           border-left-color:orange;    */
         /*边框的样式  solid 实线 */
          /* border-style: solid;  */
          /* border-top-style: solid;
          border-right-style:double ;
          border-bottom-style: dotted;
          border-left-style:dotted */
         /* 简写 */
          border:1px red solid; 

     }

     h1{
         width: 200px;
         height: 200px;
     }


   </style>

</head>
<body>
    <!-- 
        在html中,每个元素就是一个盒子，
      一个盒子由4个部分组成： 
        1 内容区 ： height+width
        2 边框(border)：   有4个方位
        3  内边距(padding): 内边距是 边框和内容区之间的距离  它由四个方位
        4  外边距(margin):外边距：一个盒子的边框于另一个盒子的边框的距离
     -->

     <h1>标题</h1>
     <p>段落的内容</p>
     <a href="">百度一个</a> <span>span的内容</span>
    
</body>
</html>